<template>
  <div class="home" >
 

    <div class="box2">
        <van-list
        v-model="params.loading"
        :finished="finished"
        finished-text="没有更多了"
         @load="onLoad"
      >
       <div class="list"  v-for="(item,index) in data" :key="index">
        
             
              <div class="info1">
                <div class="head">
                            <img :src="item.pic" alt="">
                   
                </div>
                <div class="name">
                   {{item.name}}
                </div>
                  <div class="price">
                    <div>核销金额: {{item.money}}</div>
                <div> 饮品订单 </div>
                </div>
                
            </div>
           
          
             
            <div class="info2">
                    <div class="time" v-if="active===0">
                        核销时间:{{item.createtime}}
                    </div>
                   
            </div>
        </div>
      </van-list>
       
    </div>
  </div>
</template>
<script>
import {hideWxMenu } from '@/assets/js/tools'
import { mapState, mapActions } from "vuex";
import WeChat from '@/assets/js/wx/index'
import VueBarcode from "vue-barcode";
let t;
export default {
  name: "home",
  data() {
    return {
        data:[],
      active: 0,
      params: {
        page: 0,
        loading:false,
        limit:10,
      },
      finished: false,
       count: 0,
       type:'',
    };
  },
  mounted() {
    t = this;
   
     hideWxMenu()
    t.type=t.$route.query.type
    if (!t.usersDetail.id) {
      t.GetUsersDetail({ openid:localStorage.getItem('openid') });
    }
 
  },
  computed: {
    ...mapState(["usersDetail"]),
  },
  methods: {
    ...mapActions(["GetUsersDetail"]),
    onLoad(){
        t.params.page++;
        this.getList();
    },
  
    tabsClick(name, title) {
      t.data=[];
    // this.finished=false;
      t.params.page=1;
     t.getList() 
    },
    getList() {
        let d={
            page:t.params.page,
            limit:t.params.limit,
            openid:localStorage.getItem('openid'),
            
        }
      
      t["$API"]['userWriteYplog'](d).then((res) => {
        this.params.loading = false;
        if (res.code == 200) {
          t.count = res.data.count;
        
          if (t.params.page == 1) {
            t.data = [];
            t.data = res.data.data;
          } else {
            t.data = t.data.concat(res.data.data);
          }

          if (t.data.length >= t.count) {
            this.finished = true;
          }
        } else {
          t.data = [];
          this.finished = true;
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
  background: #f1f1f1;
}

.box1 {
  background: white;
}
.box2{
    .list{
            border-radius: .3rem;
        margin: .5rem;
        background: white;
        border:1px solid #ececec;
        .order{
            padding: .5rem;
            font-size: .9rem;
            border-bottom: 1px solid #ececec;
        }
        .info1{
                    padding: .5rem;
                    display: flex;
                    align-items: center;
                    >.head{
                        >img{
                         width: 3rem;
                        height: 3rem;
                        border-radius: 50%;
                    }
                    }
                >.infoParam{
                    
                        font-size: .7rem;
                        line-height: 1.5rem;
                            color: #00b894;
                   
                }
                >.name{
                    padding-left: .5rem;
                }
                >.price{
                     font-size: .7rem;
                    flex: 1;
                    line-height: 1.5rem;
                    text-align: right;
                    color: red;
                }
        }  
        .info2{
            display: flex;
            padding:.5rem;
            align-items: center;
            border-top: 1px solid #ececec;
            .time{
                 text-align: left;
                font-size: .9rem;
                color: #5e5e5e;
                   flex:2;
            }
            .but{
                text-align: right;
                button{
                            background: #376157;
                                background-image: linear-gradient(
                            45deg, #376157, #00b894);
                            padding:0 1rem;
                }
            }
           
        } 
       
    }
}
</style>
 